import React, { Component } from 'react';
import Select from '../Component/Product/Select';
import './Product.less';

import SearchBar from '../Component/SearchBar';
import ProductList from '../Component/Product/ProductList';
import Pagination from '../Component/Product/Pagination';

export default class Product extends Component {
    onChange(index) {
        // console.log(index);
    }

    selectChanged(type, model, product, selecttype, value) {
        switch (type) {
            case "model":
                break;
            case "product":
                break;
            case "select":
                break;
            default:
                return;
        }
        //alert("type "+ type + ", " + "model "+ model + " ," + "product " + product+ " ," + "selecttype " + selecttype+ " ," + "value " + value);
    }

    sortChanged(type, sort) {
        switch (type) {
            case "up":
                break;
            case "down":
                break;
            default:
                return;
        }
        //alert("type "+ type + ", " + "sort "+ sort);
    }

    //Pagination call back page index changed
    pageIndexChange(listcount, index) {
        //alert("listcount "+ listcount + ", " + "index "+index);
    }

    render() {
        let array_select_type = [
            {
                "type": "云市场",
                "model": "model1",
                "product":
                    [
                        { "desc": "type1", "title": "云主机" },
                        { "desc": "type2", "title": "云主机" },
                        { "desc": "type3", "title": "私有网络" },
                        { "desc": "type4", "title": "VPC网络" },
                        { "desc": "type5", "title": "云硬盘" },
                        { "desc": "type6", "title": "私有网络" },
                        { "desc": "type7", "title": "VPC网络" },
                        { "desc": "type8", "title": "云主机" },
                    ],
                "select":
                    [
                        { "desc": "mode1", "title": "BI分析" },
                        { "desc": "mode2", "title": "企业建站" },
                        { "desc": "mode3", "title": "软件开发" },
                        { "desc": "mode4", "title": "电商开发" },
                    ]
            },
            {
                "type": "互联网应用",
                "model": "model2",
                "product":
                    [
                        { "desc": "type1", "title": "云主机2" },
                        { "desc": "type2", "title": "云主机2" },
                        { "desc": "type3", "title": "私有网络2" },
                        { "desc": "type4", "title": "VPC网络2" },
                        { "desc": "type5", "title": "云硬盘2" },
                        { "desc": "type6", "title": "私有网络2" },
                        { "desc": "type7", "title": "VPC网络2" },
                        { "desc": "type8", "title": "云主机2" },
                    ],
                "select":
                    [
                        { "desc": "mode1", "title": "BI分析2" },
                        { "desc": "mode2", "title": "企业建站2" },
                        { "desc": "mode3", "title": "软件开发2" },
                        { "desc": "mode4", "title": "电商开发2" },
                    ]
            }
        ];

        let product_list_count = 100;
        let array_product = [
            { "link": "", "icon": require('../img/OEM-icon/comp1.jpg'), "title": "手机在网状态", "delivery": "API", "description": "返回手机号的在网状态，身份证姓名不做一致性校验", "OEM": "天涯地合（苏州）数据股份有限公司", "bottom_description": ["开发者", "应用开发", "大数据可视化", "数据大屏", "数据API", "API"], "Guarantee": ["正", "保", "优", "退"], "grade": [1, 2, 3, 4, 5], "users": "26", "price": "0.25" },
            { "link": "", "icon": require('../img/OEM-icon/comp1.jpg'), "title": "手机在网状态", "delivery": "API", "description": "返回手机号的在网状态，身份证姓名不做一致性校验", "OEM": "天涯地合（苏州）数据股份有限公司", "bottom_description": ["开发者", "应用开发", "大数据可视化", "数据大屏", "数据API", "API"], "Guarantee": ["正", "保", "优"], "grade": [1, 2, 3, 4, 5], "users": "6", "price": "1.21" },
            { "link": "", "icon": require('../img/OEM-icon/comp1.jpg'), "title": "手机在网状态", "delivery": "API", "description": "返回手机号的在网状态，身份证姓名不做一致性校验", "OEM": "天涯地合（苏州）数据股份有限公司", "bottom_description": ["开发者", "应用开发", "大数据可视化", "数据大屏", "数据API", "API"], "Guarantee": ["正", "保", "退"], "grade": [1, 2, 3, 4, 5], "users": "9", "price": "0.35" }
        ];

        return (
            <div className="block-Product">
                <SearchBar />
                <Select data={array_select_type} selectCallback={this.selectChanged} />
                <ProductList data={array_product} Listcount={product_list_count} sortCallback={this.sortChanged} />
                <Pagination size={3} total={product_list_count} start={1} pageIndexChange={this.pageIndexChange} />
                <div className="bottom-space" />
            </div>
        )
    }
}